<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>订单报表统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>
<body>

<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        /**
         * 报表功能
         */
        let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        let optionRecords = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['蝉逸', '若草兔', '题花', '竹隐', '彼岸花', '南音落']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['第一季度', '第二季度', '第三季度', '第四季度']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '蝉逸',
                    type: 'line',
                    stack: '销量',
                    areaStyle: {},
                    data: [12, 12, 11, 14]
                },
                {
                    name: '若草兔',
                    type: 'line',
                    areaStyle: {},
                    data: [22, 12, 19, 23]
                },
                {
                    name: '题花',
                    type: 'line',
                    stack: '销量',
                    areaStyle: {},
                    data: [15, 22, 21, 15]
                },
                {
                    name: '竹隐',
                    type: 'line',
                    stack: '销量',
                    areaStyle: {},
                    data: [30, 32, 31, 33]
                },
                {
                    name: '彼岸花',
                    type: 'line',
                    stack: '销量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: [32, 39, 34, 30]
                },
                {
                    name: '南音落',
                    type: 'line',
                    stack: '销量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: [34, 19, 13, 30]
                }
            ],
            title: {
                text: '汉服销量报表[按季度]'
            }
        };
        echartsRecords.setOption(optionRecords);


        /**
         * 玫瑰图表
         */
        let echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        let optionPies = {
            title: {
                text: '订单数量统计[按商品类型]',
                x: "center",
                y: "bottom"
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['手机', '汉服穿戴', '家电']
            },
            series: [
                {
                    name: '商品分类',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [
                        {value: 27, name: '手机'},
                        {value: 30, name: '汉服穿戴'},
                        {value: 16, name: '家电'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPies.setOption(optionPies);


        /**
         * 柱状图
         */
        let echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

        let optionDataset = {
            title: {
                text: '近三年商品收入统计[按商品类型]',
                x: "center",
                y: "bottom"
            },
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2021', '2022', '2023'],
                source: [
                    {product: '汉服 穿戴', '2021': 1243.3, '2022': 1385.8, '2023': 1493.7},
                    {product: '耳机 音箱', '2021': 2283.1, '2022': 3373.4, '2023': 4455.1},
                    {product: '手机', '2021': 1286.4, '2022': 3365.2, '2023': 4482.5},
                    {product: '家电', '2021': 2272.4, '2022': 3353.9, '2023': 4539.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        echartsDataset.setOption(optionDataset);


        /**
         * 中国地图
         */
        let echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');

        let optionMap = {
            title: {
                text: '近五年汉服销量统计',
                x: "center",
                y: "bottom"
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2018', '2019', '2021', '2022', '2023'],
                    ['题花', 30, 65, 53, 83, 98],
                    ['蝉逸', 92, 85, 83, 73, 55],
                    ['若草兔', 67, 79, 86, 65, 82],
                    ['简约', 67, 69, 74, 59, 39],
                    ['南音落', 34, 39, 77, 53, 76],
                    ['妃亦坊', 66, 46, 58, 61, 75],
                    ['竹隐', 40, 36, 18, 31, 41],
                    ['彼岸花', 43, 69, 72, 53, 39]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2018} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2018',
                        tooltip: '2018'
                    }
                }
            ]
        };
        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
